<template>
  <div id="table">
    <table id="container">
      <tr>
        <td width="150px;">一级指标</td>
        <td width="150px;">二级指标</td>
        <td width="150px;">三级指标</td>
      </tr>
    </table>
    <br>
    <br>
    <br>
    <table>
      <thead>
        <tr>
          <th colspan="2">品牌</th>
          <th>品牌1</th>
          <th>品牌2</th>
          <th>品牌3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2">宝贝数</td>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
        <tr>
          <td colspan="2">宝贝数</td>
          <td>100</td>
          <td>200</td>
          <td>300</td>
        </tr>
        <!-- 商铺促销 -->
        <tr><td rowspan="4">商铺促销</td></tr>
        <tr>
          <td>优惠</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>折扣</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>秒杀</td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import $ from 'jquery'
var commonProperties = {
	"产品体验": {
		"外观": { "properties": [ "外观整体评价", "颜色", "造型（款式）", "工艺（做工）", "材质" ] },
		"功能使用感受": { "properties": [ "使用整体评价" ] },
		"质量": { "properties": [ "质量整体评价" ] },
		"附件": { "properties": [ "说明书" ] },
		"操控体验": { "properties": [ "操控体验整体评价" ] },
		"清洁/卫生健康": { "properties": [ "清洁/卫生健康整体评价" ] },
		"噪音": { "properties": [ "噪音整体评价" ] },
	},
	"购买体验": {
		"购物体验整体评价": { "properties": [ "购物体验整体评价" ] },
		"发票": { "properties": [ "发票" ] },
		"购买目的": { "properties": [ "使用对象", "购买用途" ] },
		"价格": { "properties": [ "价格", "价格波动" ] },
		"商品描述": { "properties": [ "商品描述准确性", "线上线下差异" ] },
		"信息来源": { "properties": [ "购物平台", "品牌竞争力", "促销活动" ] },
		"在线客服": { "properties": [ "客服整体评价", "客服员态度", "客服专业性", "客服响应及时性" ] },
	},
	"售后服务": {
		"安装服务": { "properties": [ "安装整体评价", "安装便捷性", "安装服务专业性", "安装售后收费" ] },
		"物流服务": { "properties": [ "物流整体评价", "物流速度", "发货速度", "物流包装" ] },
		"售后服务": { "properties": [ "售后整体评价", "售后问题处理时间", "退换商品", "维修保修" ] },
		"送货员态度及验货": { "properties": [ "送货错误", "送货人员态度", "送货上门" ] },
	}
};

export default {
  name: "table",
  data: () => ({
    // commonProperties: commonProperties
  }),
  mounted() {
    //do something after mounting vue instance
    // console.log(jjGame)
    var jjGame = jjGame || [];
    console.log(jjGame || []);
    this.init()
    this.cat()
    this.getArray()
  },
  methods: {
    init () {
      var str = '';
      var commonObj = {};

      for (var i in commonProperties) {
        var index = 0;
        // 统计一级下有多少个三级
        commonObj[i] = 0;
        for (var j in commonProperties[i]) {
          commonObj[i] += commonProperties[i][j]["properties"].length;
        }

        for (var j in commonProperties[i]) {
          for (var k in commonProperties[i][j]["properties"]) {
            var properties = commonProperties[i][j]["properties"];
            str += '<tr>';
            // 一
            if (index === 0 && k == 0) {
              str += '<td rowspan="'+ commonObj[i] +'">' + i + '</td>';
            }
            // 二
            if (k == 0) {
              str += '<td rowspan="'+ properties.length +'">' + j + '</td>'
            }
            // 三
            str += '<td>'+ properties[k] +'</td>'
            str += '</tr>';
          }
          index++;
        }
      }
      $("#container").append(str);
    },
    cat () {
      const getStoreState = (stores) => {
        return Object.keys(stores).reduce((result, storeName) => {
          console.log(result, storeName)
          result[storeName] = stores[storeName] + '1'
          // result[storeName] = stores[storeName].toJson()
          return result
        }, {})
      }
      let result = getStoreState({item1:1, item2: 'defore'})
      console.log(result)
    },
    getArray () {
      const maps = {
        '/topics': {
          type: 'post',
        },
        '/topic/.+': {
          type: 'get',
          required: false,
          json: true,
        },
        '/topics/update': {
          type: 'post',
        },
        '/topic_collect/collect': {
          type: 'post',
        },
        'topic_collect/de_collect': {
          type: 'post',
        },
        '/messages': {
          type: 'get',
        },
        'message/mark_all': {
          type: 'post',
        },
        '/message/mark_one/:.+': {
          type: 'post',
        },
        '/topic/.+/replies': {
          type: 'post',
        },
        '/reply/.+/ups': {
          type: 'post',
        },
        '/message/count': {
          type: 'get',
        },
      }

      const array = Object.keys(maps).map(url => {
        return {
          type: maps[url].type.toUpperCase(),
          required: maps[url].required !== false,
          reg: new RegExp(`^${url}$`)
        }
      })

      console.log(array)
    }
  }
}
</script>
<style lang="scss" >
table {
  border-collapse: collapse;
	margin: 0 auto 20px;
}
th, td {
  text-align: center;
  border: 1px solid #ddd;
}
</style>
